<template>
  <div v-loading="loading" class="technologies">
    <section class="info-container">
      <el-descriptions class="descriptions-list" size="large" border>
        <template #title>
          <div class="descriptions-title">
            <el-icon class="descriptions-title-icon">
              <Key />
            </el-icon>
            <span>技术</span>
          </div>
        </template>
      </el-descriptions>
      <el-container class="tech-container">
        <div class="tech-wrapper" v-for="tech in technologies">
          <router-link :to="`/technologies/${tech.id}`">
            <el-card class="tech" shadow="hover" :body-style="style.cardBody">
              <div class="tech-head">
                <el-icon>
                  <Key />
                </el-icon>
              </div>
              <div class="tech-body">
                <div class="tech-name">{{ tech.name }}</div>
              </div>
              <div class="tech-foot">
                <div class="tech-id">No.{{ tech.id }}</div>
              </div>
            </el-card>
          </router-link>
        </div>
        <div class="tech-wrapper" v-if="CreateTecPermissions">
          <router-link :to="`/technologies/create`">
            <el-card class="tech create-tech" shadow="hover" :body-style="style.cardBody">
              <div class="create-tech-logo">
                <el-icon class="create-tech-icon">
                  <Plus />
                </el-icon>
              </div>
              <div class="create-tech-text">
                <div>创建技术</div>
              </div>
            </el-card>
          </router-link>
        </div>
      </el-container>
    </section>
  </div>
  <!-- <Loading :isLoading="loading" /> -->
</template>

<script>
import { post } from '../../../utils/common/api';

export default {
  data() {
    return {
      technologies: [
        // {
        //   id: 1,
        //   name: 'DocMan'
        // },
        // {
        //   id: 2,
        //   name: 'Mostor'
        // }
      ],

      style: {
        cardBody: {
          'display': 'flex',
          'flex-direction': 'column',
          'width': '100%',
          'height': '100%',
          'box-sizing': 'border-box'
        }
      },

      loading: false,
    }
  },
  computed: {
    CreateTecPermissions() {
      return this.usePermission.systemPermission.includes(1) || this.usePermission.systemPermission.includes(9)
    }
  },

  methods: {
    async getTechnologiesList() {
      this.loading = true
      const res = await post('/technology/all', {})
      this.technologies = res.list
      this.loading = false
    }
  },

  mounted() {
    this.getTechnologiesList()
  }
}
</script>

<style scoped>
.info-container {
  padding: 20px 0;
}

.descriptions-list {
  width: 100%;
}

.descriptions-title {
  display: flex;
  align-items: center;
}

.descriptions-title-icon {
  margin-right: 8px;
}

.tech-container {
  flex-wrap: wrap;
}

.tech-wrapper {
  padding: 10px;
  width: 240px;
  height: 160px;
}

.tech {
  cursor: pointer;
  user-select: none;
  width: 100%;
  height: 100%;
  text-align: left;
}

.tech-el-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.tech-head {
  height: 25px;
}

.tech-body {
  flex-grow: 1;
  padding: 8px 0;
}

.tech-foot {
  height: 25px;
}

.tech-name {
  font-size: 18px;
  font-weight: 600;
}

.tech-id {
  font-size: 14px;
  color: #777777;
}

.create-tech {
  text-align: center;
}

.create-tech-logo {
  height: 60%;
}

.create-tech-icon {
  height: 100%;
  font-size: 24px;
}

.create-tech-text {
  height: 40%;
  font-size: 15px;
}</style>

